<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box {
            width: 200px;
            height: 200px;
            background-color: #FFA500;
        }
    </style>
</head>
<body>

<!--
    事件绑定
     1. 标签属性
     2.javascript 代码实现事件绑定
     3.事件监听

   事件分类
      1.鼠标事件   onclick  单击   ondblclick  双击    onmouseenter   onmousemove
      2.键盘事件   onkeydown  按下    onkeyup   按键弹起
      3.表单事件   获取焦点  失去焦点    内容改变   内容选中
-->
<button onclick="printInfo()">单击事件1</button>
<button>单击事件2</button>
<hr>

<div id="box">

</div>

<br>
<br>
<br>
<p>
    <input type="text" id="info" placeholder="请输入用户名">
    <span id="warn"></span>
</p>

<select id="slt">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>


<script>

    function printInfo() {
        console.log("hello  click")
    }

    // 绑定单击事件   获取节点对象
    var btn = document.getElementsByTagName('button');

    btn[1].ondblclick = function () {
        console.log("hello  onclick")
    }


    // 鼠标的移入移出事件
    var box = document.getElementById('box');

    // box.onmouseenter = function (){
    //     console.log('onmouseenter')
    // }

    // box.onmouseout = function (){
    //     console.log('onmouseout')
    // }

    box.onmousemove = function (){
        console.log('onmousemove')
    }

    // 键盘事件
    var inpt = document.getElementById("info");
    // inpt.onkeyup = function (event){
    //     console.log(event.key)
    //     if (event.key=='Enter'){
    //         console.log("onkeyup")
    //     }
    // }

    // 绑定表单事件
    inpt.onfocus = function (){
        console.log("onfocus")
    }

    inpt.onblur = function (){
        console.log(this)   //  this 指向事件源
        var  info = this.value

        var  reg = /^[a-z,A-Z]{6,10}$/

        var b = reg.test(info);
        var spn = document.getElementById("warn");

        if(b){
            spn.innerText = '用户名合法'
            spn.style.color = 'green'
        }else {
            spn.innerText = '用户名不合法'
            spn.style.color = 'red'
        }
    }


    // 获取下拉选节点对象
    var slt = document.getElementById('slt');
    slt.onchange = function (){
        console.log("onchange")
    }

</script>


</body>
</html>